<template>
  <div class="right">
    <el-card shadow="hover">
      <template #header>
        <h2>分类销售排行</h2>
        <el-radio-group v-model="type" @change="handleChange">
          <el-radio-button label="品类" value="category"></el-radio-button>
          <el-radio-button label="商品" value="product"></el-radio-button>
        </el-radio-group>
      </template>
      <template #default>
        <v-chart :option="categoryOption"></v-chart>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { getCategorydata } from '@/api'
const type = ref('category') // 默认选中品类
const tableData = ref([]) // 表格数据
const categoryOption = ref({}) // 图表选项
const categoryData = ref([]) // 分类数据
const renderPieChart = (data) => {
  const total = data.reduce((acc, cur) => acc + cur.value, 0)
  const _data = data.map((item) => ({
    name: `${item.title} | ${item.value}`,
    title: item.title,
    value: item.value,
  }))
  categoryOption.value = {
    title: [
      {
        text: '品类分布',
        textStyle: {
          fontSize: 16,
          color: '#666',
        },
      },
      {
        text: '累计订单量',
        textStyle: {
          fontSize: 14,
          color: '#999',
        },
        /* 副标题 */
        subtext: total,
        /* 副标题样式 */
        subtextStyle: {
          fontSize: 28,
          color: '#333',
        },
        /* 定位 */
        x: '40%',
        y: '45%',
        textAlign: 'center',
      },
    ],
    /* 图例 */
    legend: {
      /* 图例排序样式: 这里的vertical代表着竖向排列 */
      orient: 'vertical',
      /* 图例定位 */
      left: '80%',
      top: 'top',
      textStyle: {
        color: '#888',
      },
    },
    tooltip: {
      formatter: (params) => {
        return `
          ${params.seriesName} <br />
          ${params.marker} ${params.data.title}<br>
          ${params.marker} 销售额: ${params.data.value}
        `
      },
    },
    series: {
      type: 'pie',
      name: '品类分布',
      data: _data,
      /* 饼图的内半径和外半径,用来设置饼图的粗细和大小 */
      radius: ['45%', '60%'],
      /* 饼图的中心点位置,用于饼图的定位 */
      center: ['40%', '50%'],
      label: {
        position: 'outside',
        formatter(params) {
          return params.data.title
        },
      },
      itemStyle: {
        borderWidth: 8,
        borderColor: '#fff',
      },
    },
  }
}
const handleChange = () => {
  if (type.value === 'category') {
    renderPieChart(categoryData.value.data1)
  } else if (type.value === 'product') {
    renderPieChart(categoryData.value.data2)
  }
}
onMounted(async () => {
  categoryData.value = await getCategorydata()
  const userData = tableData.value
    .map((item) => item.totalUser)
    .slice(0, 10)
    .sort((a, b) => a - b)
  const searchData = tableData.value
    .map((item) => item.totalSearch)
    .slice(0, 10)
    .sort((a, b) => a - b)
  renderPieChart(categoryData.value.data1)
})
</script>

<style scoped>
.right {
  flex: 1;
  :deep(.el-card__header) {
    position: relative;
    h2 {
      font-weight: 600;
    }
    .el-radio-group {
      position: absolute;
      top: 10px;
      right: 20px;
    }
  }
  :deep(.el-card__body) {
    height: 462px;
  }
}
</style>
